<template>
    <view class="room">
        <view class="pt-24"></view>
        <view
            v-for="item in list"
            :key="item.id"
            class="room-item mb-24 br-24 flex p-24"
            @click="toDetails(item)"
        >
            <view class="room-item-img over-hide">
                <view
                    class="center room-item-tag br-10 pl-8 pr-12 pt-4 pb-4"
                    v-if="item.stockNum === 1"
                >
                    <hj-image
                        src="hot-01.png"
                        :isLoad="false"
                        width="24rpx"
                        height="24rpx"
                        mode="aspectFit"
                    />
                    <text class="ft-22 ml-4">仅剩1间</text>
                </view>
                <hj-image
                    :img="item.coverImg"
                    :isLoad="false"
                    width="220rpx"
                    height="250rpx"
                    mode="aspectFill"
                />
            </view>
            <view class="flex-auto pl-20 column space-between">
                <view class="title ft-32 bold t-3 text-over-1">{{ item.nameZh || '' }}</view>
                <view class="flex-auto pt-6">
                    <view class="ft-26 t-6 mb-4">
                        <template v-if="item.bedTypeList.length > 0">
                            <text v-for="(bed, i) in item.bedTypeList">
                                <template v-if="i > 0">+</template>{{ bed.bedWidth }}米{{
                                    bed.bedType
                                }}
                            </text>
                        </template>
                        <text v-if="item.roomArea" class="ml-12">{{ item.roomArea }}㎡</text>
                    </view>
                    <view class="ft-26 t-6 mb-4" v-if="item.breakfastCount">
                        <text v-if="item.maxAdult" class="mr-12">
                            {{ item.maxAdult || 1 }}人入住
                        </text>
                        <text class="mr-12">{{ item.breakfastCount || 0 }}份早餐</text>
                    </view>
                    <view class="ft-26 t-6 mb-4" v-else>无早餐</view>
                    <view class="ft-26 tip mb-4">
                        入住当天{{ formatDate(item.freeCancelHours) }}前可免费取消
                    </view>
                </view>
                <view class="space-between align-center">
                    <view class="c-m price">
                        <text class="ft-22">最低</text>
                        <text class="ft-24">￥</text>
                        <text class="ft-42 bold">{{ item.sellPrice || '-' }}</text>
                    </view>
                    <view
                        class="but center ft-28 t-w br-10 mr-4"
                        :class="[item == 1 ? 'but-primary' : '']"
                    >
                        {{ item == 1 ? '抢订' : '预订' }}
                    </view>
                </view>
            </view>
        </view>
        <view class="pb-6"></view>
    </view>
</template>

<script setup>
/**
 * @description 房型列表
 * @author yinzhi
 * @date 2025-05
 */
import { defineComponent } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'RoomList'
})
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

// 跳转详情页面
const toDetails = item => {
    if (!item.id) {
        return
    }
    uni.navigateTo({
        url: `/pages/hotel/hotel-details/index?roomId=${item.id || ''}`
    })
}

// 时间格式处理
const formatDate = date => {
    try {
        const today = dayjs().format('YYYY-MM-DD')
        return dayjs(`${today} ${date}`).format('HH:mm')
    } catch (e) {
        console.error('时间格式转换失败:', e)
        return '20:00'
    }
}
</script>

<style scoped lang="scss">
.room {
    &-item {
        background: $uni-bg-color;
        box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
        &-img {
            border-radius: 16rpx;
            position: relative;
        }
        &-tag {
            position: absolute;
            left: 12rpx;
            top: 12rpx;
            z-index: 9;
            background: $uni-color-primary;
            color: #fff;
        }
        .but {
            height: 56rpx;
            background: $uni-color-primary;
            padding: 0 30rpx;
            line-height: 1;
        }
        .but-primary {
            background: $uni-color-error;
        }
        .tip {
            color: rgba($color: $uni-color-primary, $alpha: 0.7);
        }
    }
}
</style>
